<template>
    <div class="activity-contain">
        <div class="header">
           <p>新增/编辑车型报价</p>
       </div>
       <div class="main">
            <el-form :model="information" :rules="rules" ref="information" label-width="120px" class="">
                <el-form-item label="活动标题" prop="activityName">
                    <el-input v-model="information.activityName" placeholder="请输入活动标题"></el-input>
                </el-form-item>
                <el-form-item label="封面：" prop="images">
                    <el-upload  list-type="picture-card" class="normal-uploader" 
                        :class="{uploadShow:uploadShow}"
                        :action="upLoadUrl"    
                        :on-success="handleFileSuccess"   
                        :on-preview="handlePictureCardPreview"  
                        :file-list='fileShowList'
                        :limit='10'
                        :on-remove="handleRemove">   
                        <i class="el-icon-plus"></i> 
                    </el-upload> 
                    <p class="tip-img">*上传图片尺寸：240*160</p>
                    <el-dialog :visible.sync = "dialogVisible" size="tiny">   <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog>
                </el-form-item>
                <el-form-item label="详情：" prop="detail">
                    <bg-editor 
                        :minHeight="300" 
                        :uploadUrl="upLoadUrl" 
                        :content="information.detail"
                        @editorData='editorInfo'>
                    </bg-editor>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('information')" >保存</el-button>
                    <el-button @click="$router.push('/activityList')" type="primary" >返回</el-button>
                </el-form-item>
            </el-form>
        </div>
       
    </div>
    

</template>

<script>
let CONSTANT = require('../../constant/constant.js');
let common = require("../../common.js");
export default {
    data() {
      return {
        id:'',
        upLoadUrl:'',
        dialogImageUrl:'',
        information: {
            id:'',
            activityName:"",
            detail:"",
            images:[]
        },
        uploadShow:false,
        dialogVisible:false,
        fileShowList:[],
        dataList:[],
        rules: {
          activityName: [
            { required: true, message: '请输入活动标题', trigger: 'blur' },
            { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
          ],
          images:[
            {required: true, message: '请上传图片', trigger: 'change'  }
          ],
          detail: [
            { required: true, message: '请填写详情', trigger: 'change' },
          ]
        }
      };
    },
    components:{
        'bg-editor':()=>import('../common/bg-editor.vue')
    },
    
    mounted() {
        let sessionId = common.getCookie('sessionId');
        this.upLoadUrl =CONSTANT.URL.COMMON.UPLOAD+ '?sessionId='+sessionId;
        this.id  = this.$router.currentRoute.query.id;
        if(this.id){
            this.getDetail();
        }
        
    },
    methods: {
        getDetail(){
            let url = CONSTANT.URL.ACTIVITY.ACTIVITYDETAIL,
            param={
                id:this.id
            }
            common.requestAjax(url,param,{},(res)=>{
                if(res.status == 200){
                     let data = res.data;
                     let detail = res.data.bussData;
                     this.information.id = detail.id;
                     this.information.activityName = detail.activityName;
                     this.information.detail = detail.detail;
                     this.information.images = detail.images;
                     this.uploadShow = true;
                     detail.images.forEach((item)=>{
                        this.fileShowList.push({
                            url:item.fileUrl
                        })
                     })
                }
            })
      },
      handleRemove(file, fileList) {      // 图片上传
        let deleteUrl = file.url;
        let list = this.information.images;
        list.forEach(function(item,index){
            if(item.fileUrl == deleteUrl){
                list.splice(index,1);
            }
        })
        this.uploadShow = false;
        this.information.images = list;
      },       
      handlePictureCardPreview(file) {    
        this.dialogImageUrl = file.url;         
        this.dialogVisible = true;      
      },
      handleFileSuccess(res, file) {
        if(res.status == 200){
            let picItem = res.data.bussData;
            this.information.images.push(picItem);
            this.uploadShow = true;
        }
      },
      editorInfo(val){
          this.information.detail = val;
      },     
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let url = CONSTANT.URL.ACTIVITY.ACTIVITYEDIT;
            let data = {
                    id:this.information.id?this.information.id:'',
                    activityName: this.information.activityName,
                    detail:this.information.detail,
                    images:this.information.images
            };
            if(this.id != ''){
               data.id = this.id;
           }
            let param = JSON.stringify(data);
            common.requestAjax(url, param, null, res => {
                if(res.status == 200) {
                    this.$message({
                        type: 'success',
                        message: '保存成功!'
                    });
                    this.$router.push("/activityList");
                } else {
                    this.$message({
                        type: 'error',
                        message: res.msg
                    });
                }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    }
  }
</script>

<style lang="scss" scoped >
    .activity-contain {
        .header{
            height: 46px;
            padding-bottom: 10px;
            border-bottom: 1px solid #dedede;
            p{ float: left;height: 36px;line-height: 36px;margin: 0 0 0 10px;font-size: 18px;}
            .el-button{
                float: right;
                margin-right: 5%
            }
        }
        .tip-img{
            font-size: 12px;
            color:red;
        }
        .main {
            // width:500px;
            //max-width: 1500px;
            margin: 20px 0 0 40px;
            clear: both;
            .el-input,
            .el-select {
                width: 250px;
            }
            .modal-body{
                .note-image-input{
                    display: block;
                }
            }
            .distpicker-address-wrapper{
                display: flex;
                height: 40px;
                position: relative;
                select{
                    -webkit-appearance: none;
                    background-color: #fff;
                    border-radius: 4px;
                    border: 1px solid #dcdfe6;
                    box-sizing: border-box;
                    color: #606266;
                    display: inline-block;
                    font-size: inherit;
                    height: 40px;
                    line-height: 1;
                    outline: 0;
                    padding: 0 40px 0 20px;
                    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
                    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
                    margin-right: 20px;
                }
                select:focus{ border-color: #409eff;}
                .cret1{
                    position: absolute;
                    left: 150px;
                    top:15px;
                    width: 7px;
                    height: 7px;
                    border-right:1px solid #c0c4cc;
                    border-bottom:1px solid #c0c4cc;
                    -webkit-transform: rotate(45deg);
                    transform: rotate(45deg);
                }
                .cret2{
                    position: absolute;
                    right: 80px;
                    top:15px;
                    width: 7px;
                    height: 7px;
                    border-right:1px solid #c0c4cc;
                    border-bottom:1px solid #c0c4cc;
                    -webkit-transform: rotate(45deg);
                    transform: rotate(45deg);
                }
                }
        }
    }
</style>
<style>
  .distpicker-address-wrapper select{
    margin-right: 20px;
  }
  .activity-contain .el-upload-list--picture-card .el-upload-list__item{
      width: 240px;
      height: 160px;
  }
.panel-heading{
    position: relative!important;
}
.note-toolbar{
    z-index: 10!important;
}
.uploadShow  .el-upload{display: none;}
</style>

